<template>
	<div class="container">
		<div class="box">
			<div class="login-logo">
				<img src="../assets/img.jpg" />
			</div>
			<div class="wrapper">
				<el-form :model="userModel" :rules="loginRules" ref="loginRuleFormRef">
					<el-form-item prop="username">
						<el-input prefix-icon="el-icon-user" v-model="userModel.username"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input prefix-icon="el-icon-lock" type="password" v-model="userModel.password"></el-input>
					</el-form-item>
					<el-form-item>
						<div style="text-align: right;">
							<el-button type="primary" @click="userLogin" :loading="loading">登录</el-button>
							<el-button color="gray">重置</el-button>
						</div>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		// 组件名称
		name: 'demo',
		// 组件状态值
		data() {
			return {
				userModel: {
					username: "admin",
					password: "123456",
				},
				loading: false,
				// 表单校验
				loginRules: {
					username: [{
						validator(rule, value, callback) {
							value = value.trim();
							if (value === "") {
								return callback(new Error('用户名不能为空'))
							}
							if (!/^[A-Za-z]{5,12}$/i.test(value)) {
								return callback(new Error('用户名长度为5~12位'))
							}
							callback();
						},
						trigger: "blur"
					}, ],
					password: [{
						validator(rule, value, callback) {
							value = value.trim();
							if (value === "") {
								return callback(new Error('密码不能为空'))
							}
							if (!/^[\da-z]{6,12}$/i.test(value)) {
								return callback(new Error('密码长度为6~12位'))
							}
							callback();
						},
						trigger: "blur"
					}, ],
				}
			}
		},
		// 组件方法
		methods: {
			// 登录
			async userLogin() {
				try {
					await this.$refs.loginRuleFormRef.validate();
					try {
						this.loading = true;
						const data = await this.$apis.getLogin(this.userModel);
						this.$router.push({
							name: "home"
						});
					} catch (error) {
						this.$message.error('失败')
					} finally {
						this.loading = false;
					}
				} catch (e) {
					console.log(e)
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		background-color: #2b4b6b;

		.box {
			position: absolute;
			top: 50%;
			width: 450px;
			height: 304px;
			border-radius: 3px;
			background-color: #FFFFFF;
			box-shadow: 0 0 10px #ddd;
			left: 50%;
			transform: translate(-50%, -50%);

			.login-logo {
				position: absolute;
				left: 50%;
				box-shadow: 0 0 10px #ddd;
				transform: translate(-50%, -50%);
				width: 130px;
				height: 130px;
				border-radius: 50%;
				border: 1px solid #efefef;
				padding: 10px;
				background-color: #fff;
				z-index: 1;

				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background-color: #efefef;
				}
			}

			.wrapper {
				.el-form {
					width: 100%;
					position: absolute;
					left: 0;
					bottom: 0;
					padding: 0 20px;
					box-sizing: border-box;

					.zh-button {
						display: flex !important;
						justify-content: flex-end;
					}
				}


			}
		}
	}
</style>
